<template>
    <div class="RCPY_wraper">
        <div class="wrap">
            <div class="header">
                <div class="header_title">{{ $t('p6.tab1.title') }}</div>
                <div class="icon"></div>
            </div>

            <div class="desc">
                {{ $t('p6.tab1.desc') }}
            </div>
            <div class="imgs_wrap">

                <div class="box">
                    <div class="img_item" v-for="o in imgs">
                        <div class="pos">
                            <el-image
                                :src="o"
                                fit="fill"
                                :preview-src-list="[o]">
                            </el-image>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
import r1 from '@/assets/images/wi/r1.png'
import r2 from '@/assets/images/wi/r2.png'
import r3 from '@/assets/images/wi/r3.png'
import r4 from '@/assets/images/wi/r4.png'
import r5 from '@/assets/images/wi/r5.png'
import r6 from '@/assets/images/wi/r6.png'
import { getStore } from '@/libs'
export default {
    name: "index",
    components: {

    },
    data() {
        return {
            imgs: [r4,r5,r6,r1,r2,r3],
            params: null,
        }
    },

    created() {
        this.params = this.$route.query
    },
    methods: {

    }
};
</script>


<style lang="scss" scope>
.RCPY_wraper{
    color: #333333;
    .wrap{
        .header{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: 40px;
            .header_title{
                font-size: 28px;
                font-weight: bold;
            }
            .icon{
                margin-top: 5px;
                display: block;
                width: 35px;
                height: 5px;
                background-color: #98000A;
                border-top: 2px solid #FCA400;
            }
        }

        .desc{
            display: flex;
            justify-content: center;
            margin-top: 40px;
            padding: 0 20px;

        }
        .imgs_wrap{
            display: flex;
            margin: 50px 0;


            .box{
                display: flex;
                justify-content: center;
                flex-wrap: wrap;

                .img_item{
                    // background: #98000A;
                    border-radius: 0px 0px 45px 0px;
                    background: linear-gradient(to bottom left, #98000A, #FFF);
                    width: 310px;
                    height: 250px;
                    margin: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;

                    .pos{
                        position: absolute;
                        top: -10px;
                        left: -10px;
                        img{
                            width: 310px;
                            height: 250px;
                            z-index: 11111;
                        }
                    }

                }
            }

        }
    }
}
</style>
